import React, {PureComponent} from 'react';
import {
	Image,
	StyleSheet,
	Text,
	View,
	Dimensions,
	TouchableOpacity,
	Platform
} from 'react-native';

// 获取宽度
let {width: WIDTH} = Dimensions.get('window');

/**
 * @FileName: HeaderView
 * @Author: mazaiting
 * @Date: 2018/6/14
 * @Description:
 */
class MineHeaderView extends PureComponent {
	render() {
		return (
			<View style={styles.container}>
				{/*上部分*/}
				{this.renderTopView()}
				{/*下部分*/}
				{this.renderBottomView()}
			</View>
		)
	}
	
	/**
	 * 渲染上方View
	 */
	renderTopView() {
		return (
			<View style={styles.topViewStyle}>
				<Image source={{uri: 'mine_header_see'}} style={styles.leftIconStyle}/>
				<View style={styles.centerViewStyle}>
					<Text style={{fontSize: 18, color: 'white', fontWeight: 'bold'}}>凌浩雨</Text>
					<Image source={{uri: 'mine_header_avatar_vip'}} style={{width: 18, height: 18}}/>
				</View>
				{/*右边的箭头*/}
				<Image source={{uri: 'icon_cell_right_arrow'}} style={{width: 12, height: 12, marginRight: 8}}/>
			</View>
		)
	}
	
	/**
	 * 渲染上方View
	 */
	renderBottomView() {
		return (
			<View style={styles.bottomViewStyle}>
				{this.renderBottomItem()}
			</View>
		)
	}
	
	/**
	 * 绘制条目
	 */
	renderBottomItem() {
		// 数组
		let itemArr = [];
		// 数据数组
		let data = [
			{'number': '100', 'title': '优惠券'},
			{'number': '12', 'title': '评价'},
			{'number': '50', 'title': '收藏'}
		];
		// 遍历创建组件, 装入数组
		for (let i = 0; i < data.length; i++) {
			// 取出单独的一条数据
			let item = data[i];
			itemArr.push(
				<TouchableOpacity key={i} activeOpacity={0.5}>
					<View style={styles.bottomInnerViewStyle}>
						<Text style={{color: 'white'}}>{item.number}</Text>
						<Text style={{color: 'white'}}>{item.title}</Text>
					</View>
				</TouchableOpacity>
			)
		}
		return itemArr
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		height: Platform.OS === 'ios' ? 400:200,
		backgroundColor: 'rgba(255,96,0,1.0)'
	},
	topViewStyle: {
		flexDirection: 'row',
		marginTop: Platform.OS === 'ios' ? 280:80,
		alignItems: 'center',
		justifyContent: 'space-around'
	},
	leftIconStyle: {
		width: 70,
		height: 70,
		borderRadius: 35,
		borderWidth: 3,
		borderColor: 'rgba(0,0,0,0.2)'
	},
	centerViewStyle: {
		flexDirection: 'row',
		width: WIDTH * 0.72
	},
	bottomViewStyle: {
		flexDirection: 'row',
		alignItems: 'center',
		// 绝对定位
		position: 'absolute',
		bottom: 0
	},
	bottomInnerViewStyle: {
		justifyContent: 'center',
		alignItems: 'center',
		width: WIDTH / 3 + 1,
		height: 40,
		backgroundColor: 'rgba(255,255,255,0.4)',
		borderRightWidth: 1,
		borderRightColor: 'white'
	}
});

/**
 * 导出当前Module
 */
module.exports = MineHeaderView;